import Vue from "vue";
import VueRouter from "vue-router";


import Login from './views/login/index.vue'                    //引入登录组件
import Layout from '@/components/Layout.vue'                   //@代表src目录----引入布局组件
// 与上面功能一致，他会默认导入./views/login下的/index.vue组件    引入登录组件
// import Login from './views/login'

import Home from './views/home/index.vue'//引入首页组件
import Member from './views/member/index.vue'//引入会员组件
import Supplier from './views/supplier/index.vue'//引入供应商组件
import Goods from './views/goods/index.vue'//引入商品组件
import Staff from './views/staff/index.vue'//引入员工组件


Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    //登录组件---------------------------/login/index.vue
    {
      path: '/login',
      name: 'login',//路由名称------------实现页面的登录功能
      component: Login // 组件对象
    },
    //布局组件--------------------包括头部，左侧导航栏，中间主区域 ---layout.vue
    {
      path: '/',
      name: 'layout',//路由名称
      component: Layout, // 组件对象
      redirect: '/home',//重定向，使页面初始化进去的时候就默认管理指定路径的页面
      children: [
        {
          path: '/home',
          name: 'home',//路由名称
          component: Home, // 组件对象
          meta: { title: '首页' }
        },
        // {
        //   path: '/member',
        //   name: 'member',//路由名称
        //   component: Member, // 组件对象
        //   meta: { title: '会员管理' }
        // },
        // {
        //   path: '/supplier',
        //   name: 'supplier',//路由名称
        //   component: Supplier, // 组件对象
        //   meta: { title: '供应商管理' }
        // },{
        //   path: '/goods',
        //   name: 'goods',//路由名称
        //   component: Goods, // 组件对象
        //   meta: { title: '商品' }
        // },{
        //   path: '/staff',
        //   name: 'staff',//路由名称
        //   component: Staff, // 组件对象
        //   meta: { title: '员工管理' }
        // },
      ]
    },
    //所有的主区域子组件都渲染在layout中，在layout中再进行子组件的渲染
    {
      path: '/member',
      component: Layout,
      children: [
        {
          path: '/member/',//等价于path:'/'
          component: Member,
          meta: { title: '会员管理' }
        }
      ]
    },
    {
      path: '/supplier',
      component: Layout,
      children: [
        {
          path: '/supplier/',//等价于path:'/'
          component: Supplier,
          meta: { title: '供应商管理' }
        }
      ]
    },
    {
      path: '/goods',
      component: Layout,
      children: [
        {
          path: '/goods',//等价于path:'/'
          component: Goods,
          meta: { title: '商品管理' }
        }
      ]
    },
    {
      path: '/staff',
      component: Layout,
      children: [
        {
          path: '/staff',//等价于path:'/'
          component: Staff,
          meta: { title: '员工管理' }
        }
      ]
    },
  ]
});

export default router;
